<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div>
      <div class="actions">优惠卷</div>
      <div class="search">
        <p>优惠卷筛选</p>
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="优惠类型">
            <el-select v-model="search.type" placeholder="请选择">
              <el-option label="所有课程" value="所有课程"></el-option>
              <el-option label="原型课程" value="原型课程"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="search.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入优惠卷名称或编号"
              v-model="search.msg"
              style="width: 230px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="background: #38a28a"
              @click="siftData"
              >筛选</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="con">
        <div>
          <div
            class="top"
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 0 20px;
              box-sizing: border-box;
            "
          >
            <p>优惠卷列表</p>
            <el-row>
              <el-button
                type="primary"
                style="background: #38a28a"
                @click="addData"
                >添加优惠卷</el-button
              >
            </el-row>
          </div>
          <el-table
            :data="
              searchData.slice(
                (Number(pageNum) - 1) * Number(pageSize),
                Number(pageNum) * Number(pageSize)
              )
            "
            width="100%"
            max-height="300"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="编号" width="100px">
            </el-table-column>
            <el-table-column prop="title" label="名称" width="140px">
            </el-table-column>
            <el-table-column prop="useRange" aria-disabled="true" label="使用范围" width="120px">
            </el-table-column>
            <el-table-column prop="useDoor" label="使用门槛" width="160px">
            </el-table-column>
            <el-table-column prop="faceValue" label="面值" width="100px">
            </el-table-column>
            <el-table-column prop="expiryDate" label="有效期" width="160px">
            </el-table-column>
            <el-table-column prop="id" label="状态" width="120px">
              <template slot-scope="scope">
                <span>{{
                  scope.row.pouponType == 0
                    ? "待支付"
                    : scope.row.pouponType == 1
                    ? "已支付"
                    : scope.row.pouponType == 2
                    ? "已关闭"
                    : "已退款"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="230px"
              textAlign="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color: #38a28a"
                  @click="lookJuan(scope.row.id)"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="removeJuan(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="all">
          <p></p>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[3, 5, 10, 20]"
              :page-size="3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="searchData.length"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <add-pop v-if="pop.addShow ? true : false" :closePop="closePop"></add-pop>
    <look-pop
      v-if="pop.lookShow ? true : false"
      :lookData="lookData"
      :closePop="closePop"
    ></look-pop>
    <edit-pop
      v-if="pop.editShow ? true : false"
      :closePop="closePop"
      :editData="editData"
      :getEditData="getEditData"
    ></edit-pop>
  </div>
</template>

<script>
import addPop from "../../../../components/discountPop/addPop.vue";
import LookPop from "../../../../components/discountPop/lookPop.vue";
import editPop from "../../../../components/discountPop/editPop.vue";
// import a from './a';
export default {
  components: { addPop, LookPop, editPop },
  data() {
    return {
      checked: true,
      juanData: [],
      pageSize: 3,
      pageNum: 1,
      pop: {
        addShow: false,
        lookShow: false,
        editShow: false,
      },
      lookData: "",
      search: {
        //筛选
        type: "",
        time: "",
        msg: "",
      },
      searchData: [],
      editData: "",
    };
  },
  computed: {
    changeAll: {
      //全选
      get() {},
      set(val) {},
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    async getData() {
      let res = await this.$axios.get("/api/miao/data");
      this.juanData = res.data.filter((item) => {
        return item.promote == 1;
      });
      this.searchData = this.juanData;
    },
    // 筛选
    siftData() {
      let { msg, type } = this.search;

      this.searchData = this.juanData.filter((item) => {
        return item.title.includes(msg);
      });
      console.log(this.searchData);
    },
    //关闭弹框
    closePop() {
      this.pop.addShow = false;
      this.pop.lookShow = false;
      this.pop.editShow = false;
    },
    // 删除
    removeJuan(i) {
      this.$axios.post("/api/miao/deldatajuan", {
        id: i,
      });
      this.getData();
    },
    // 选中状态
    lookJuan(i) {
      // 查看
      this.pop.lookShow = true;
      this.lookData = this.juanData.find((item) => {
        return item.id == i;
      });
      console.log(this.lookData);
    },
    changeChecked(val) {
      //每一条数据的是否选中状态
    },
    addData() {
      // 添加秒杀活动
      this.pop.addShow = true;
    },
    handleSizeChange(val) {
      //每页多少条
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //当前第几页
      this.pageNum = val;
    },
    //获取编辑后数据
    getEditData(data) {
      // 获取编辑后的数据
      let res = this.$axios.post("/api/miao/editjuan", {
        obj: data,
      });
      this.getData();
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.actions {
  width: 100%;
  height: 20px;
  padding: 20px 40px;
  font-weight: bold;
}
.search {
  width: 92%;
  margin-left: 4%;
  background: #fff;
  height: 100px;
  margin-bottom: 20px;
}
.con {
  box-sizing: border-box;
  width: 92%;
  margin-left: 4%;
  height: 450px;
  /* margin-top: 2%; */
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.top {
  height: 80px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.top p {
  font-weight: bold;
}
.all {
  width: 95%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 3%;
  bottom: 20px;
}
.el-pager li.active {
  color: #38a28a;
  cursor: default;
}
.search > p {
  padding: 10px 0 0 10px;
}
.demo-form-inline {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>